<template>
  <div>
    <h4>{{ num }}</h4>
    <p>{{ numStr }}</p>
    <button @click="setNum">修改num</button>

    <Com.one></Com.one>

    <!-- <Com.one></Com.one> -->
    <!-- <Com.readonly></Com.readonly> -->
    <hr />
    <p>{{ lists }}</p>
    <Com.Two
      a="888"
      b="100"
      motto="理智"
      @getlists="receiveData"
      ref="obj"
    ></Com.Two>
  </div>
</template>

<script setup>
// <script setup> 它内部的代码最终还是被编译到setup(){}中了，只是这个是setup(){}函数的语法糖，使用更加方便。
import { ref, computed, provide } from "vue";

// 2. 组件直接导入即可，不需要在components:{} 里面注册了
// import One from "@/components/One.vue";
// import Two from "@/components/Two.vue"
// 3. DefineProps : 它是让子组件使用的，声明props属性的，因为 <script setup> 不再提供配置项了。
// 4. useAttrs: 它主要是保存子组件没有声明但是父组件传递的prop值。
// 5. defineExpose: 它主要是在子组件内部使用，让子组件向父组件暴漏属性和方法，让父组件直接调用。

// import {One,Readonly} from "@/modules/coms.js" // 按需导入，用哪个导入那个
import * as Com from "@/modules/coms"; // 起一个别名,全部导入使用

// 1. 在顶层声明的变量、函数、以及import导入的组件，不需要return或者注册子组件，组件模板可以直接使用。
let obj = ref(); // obj代表的是子组件的实例对象了
let num = ref(999);
let numStr = computed(() => `这是一个数字:${num.value}`);
let setNum = () => {
  num.value++;

  console.log("====", obj.value.item);
  console.log("====", obj.value.size);
  obj.testFun();
};

provide("uname", num); // 提供
provide("uage", numStr);

/* 子传父 */
let lists = ref("");
let receiveData = (data) => {
  console.log("父组件收到的数据", data);
  lists.value = data;
  console.log(lists); // 是个proxy
};

/* 父组件使用子组件里面定义属性和方法
1. 在子组件里面定义ref 这个ob对应的就是组件(如果在标签里面写就代表是标签)
*/
</script>

<style lang="less" scoped></style>
